import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  Stepper,
  ProductCard,
  Checkbox,
  SwipeCell,
  Button,
  SubmitBar,
  Dialog,
  NavBar,
} from "react-vant";
import "./style.scss";
import {
  addToCart,
  removeItemCarById,
  removmItemCarByCheck,
  subToCar,
  switchAllCheck,
  switchSelected,
} from "../../store/modules/cart/cartActions";
import { useNavigate } from "react-router-dom";
import nullCar from "../../assets/images/null_car.png";
const Index = () => {
  const list = useSelector((state) => state.cart.list);
  const selectAllPrice = useSelector((state) => state.cart.selectAllPrice);
  const allCheck = useSelector((state) => state.cart.allCheck);
  const dispatch = useDispatch();
  const [isEdit, setIsEdit] = useState(false);
  const navigate = useNavigate();
  const handleReremoveById = (id) => {
    Dialog.confirm({
      title: "警告⚠️",
      message: "确认要删除吗？",
    })
      .then(() => {
        dispatch(removeItemCarById(id));
      })
      .catch(() => {
        console.log("取消了删除");
      });
  };

  const handleReremoveByCheck = () => {
    Dialog.confirm({
      title: "警告⚠️",
      message: "确认要删除吗？",
    })
      .then(() => {
        dispatch(removmItemCarByCheck());
      })
      .catch(() => {
        console.log("取消了删除");
      });
  };
  return (
    <div className="cart">
      <NavBar
        title="购物车"
        rightText={isEdit ? "完成" : "编辑"}
        onClickLeft={() => navigate(-1)}
        onClickRight={() => setIsEdit(!isEdit)}
      ></NavBar>
      <div>
        {list.length !== 0 ? (
          <div>
            {list.map((v, i) => {
              return (
                <SwipeCell
                  key={i}
                  rightAction={
                    <Button
                      onClick={() => handleReremoveById(v.id)}
                      style={{ height: "100%" }}
                      square
                      type="danger"
                    >
                      删除
                    </Button>
                  }
                >
                  <div className="car-item">
                    <Checkbox
                      checked={v.check}
                      onChange={() => dispatch(switchSelected(v))}
                      className="check"
                    ></Checkbox>
                    <ProductCard
                      num={
                        <Stepper
                          value={v.count}
                          onPlus={() => dispatch(addToCart(v))}
                          onMinus={() => dispatch(subToCar(v))}
                          onOverlimit={() => handleReremoveById(v.id)}
                          min={1}
                        ></Stepper>
                      }
                      price={v.price}
                      title={v.title}
                      thumb={v.image}
                    ></ProductCard>
                  </div>
                </SwipeCell>
              );
            })}
          </div>
        ) : (
          <div
            style={{
              display: "flex",
              alignItems: "center",
              flexDirection: "column",
            }}
          >
            <img
              src={nullCar}
              alt=""
              style={{ width: "50%", marginTop: "100px" }}
            />
            <div>暂无数据， 快去买点商品吧！</div>
          </div>
        )}
      </div>

      <SubmitBar price={selectAllPrice * 100} buttonText="提交订单">
        <Checkbox
          checked={allCheck}
          onChange={() => dispatch(switchAllCheck(!allCheck))}
        >
          全选
        </Checkbox>

        <span
          className={isEdit ? "delete active" : "delete"}
          onClick={() => handleReremoveByCheck()}
        >
          删除所选
        </span>
      </SubmitBar>
    </div>
  );
};

export default Index;
